<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script type="text/javascript" src="../../../../swordweb/core/jsimport/Sword.js"></script>

	 <script type="text/javascript">


	 	function ok(){
             if(pc.getWidget('columns').getCheckedRowData('check').length==0){
                 alert('请至少显示一列。');
                 return;
             }
             box.fireEvent("onOk",[
                 pc.getWidget('columns').getStatusRowsData()
                 ,pc.getWidget('fontsize').box.get('value')
             ]);
//             box.closePopUpBox();
		}
		
		function cancel(){
//		 	box.fireEvent("onCancel");
             box.closePopUpBox();
		}
		
	     function before(){ //将数据写入到pageinit中
             var param=box.options.param;
             var dataFontSize=param.dataFontSize;
             var initData=param.initData;

             $('PageInit').set('data',JSON.encode(initData));
         }

         function success(){
             var param=box.options.param;
             var dataFontSize=param.dataFontSize;

              pc.getWidget('fontsize').box.set('value',dataFontSize);
              pc.getWidget('columns').setDataFontSize(dataFontSize);

/*             var mySlider = new Slider('myElement', 'myKnob', {
                 range: [-50, 50],
                 wheel: true,
                 snap: true,
                 onStart: function() {
                     this.borderFx = this.borderFx || this.element.tween('border').start('#ccc');
                 },
                 onTick: function(pos) {
                     this.element.setStyle('border-color', '#f00');
                     this.knob.setStyle(this.p, pos);
                 },
                 onComplete: function() {
                     this.element.tween('border').start('#000');
                 }
             });
         */
        }

         function changeFontSize(el,data){
               var size=data.getAttribute('value');
               pc.getWidget('columns').setDataFontSize(size);
         }


	 </script>

 </head>

<body>

<div sword='PageInit'
     id='PageInit'
onBefore="before()"
onSuccess="success()"
        ></div>


<table>
    <tr>
        <td>

            <div sword='SwordGrid'
                 name='columns'
                 fenye='false'
                 showHeaderMenu='false'
                 dragWidth='false'
                 dragColumn='false' 
                 caption='请在您要显示的列前面打勾！'>

                <div name="check" caption="多选" type="checkbox" x="60" data='true'></div>
                <div name="caption" caption="列名称"></div>

            </div>
        </td>

        <td valign="top">
            请选择字的大小(大小可以参考左面的表格)：
            <div sword='SwordSelect'
                 name='fontsize'
                 onChange="changeFontSize()" >
                <div value="10px" caption="10px"></div>
                <div value="12px" caption="12px"></div>
                <div value="15px" caption="15px"></div>
                <div value="18px" caption="18px"></div>
                <div value="20px" caption="20px"></div>
                <div value="23px" caption="23px"></div>
                <div value="25px" caption="25px"></div>
            </div> 
           <!-- <div id="fontsizedemo">
                字的大小示例
            </div>-->


          <!--  <div id="myElement" style="width:300px;border:1px solid red;">
                   <div id="myKnob" style="width:100px ; border:1px solid blue ; ">
                333
            </div>
            </div>-->

        </td>
    </tr>
</table>







<div align='center'>
    <input type='button' value="确定"  onclick="ok()">
    <input type='button' value="取消"  onclick="cancel()">
</div>

</body>
</html>





